<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>index</title>
		<link rel="stylesheet" type="text/css" href="./css/aui.css" />
		<!--拓展AUI字体图标-->
		<link rel="stylesheet" type="text/css" href="./css/iconfont/iconfont.css" />
	</head>
	<body>
		<header class="aui-bar aui-bar-nav aui-bar-danger" id="aui-header">
			<a class="aui-btn aui-btn-danger aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<div class="aui-title" id="header-title">
				首页
			</div>
		</header>
		<footer class="aui-nav" id="aui-footer">  
			<ul class="aui-bar-tab">
				<li class="active-warning" id="tabbar1" tapmode onclick="randomSwitchBtn(this,'首页',0)">
					<span class="aui-iconfont aui-icon-home"></span>
					<p>
						首页
					</p>
				</li>
				<li id="tabbar2" tapmode onclick="randomSwitchBtn(this,'分类',1)">
					<span class="aui-iconfont aui-icon-apps"></span>
					<p>
						分类
					</p>
				</li>
				<li id="tabbar3" tapmode onclick="randomSwitchBtn(this,'购物车',2)">
					<span class="aui-iconfont aui-icon-cart"></span>
					<p>
						购物车
					</p>
				</li>
				<li id="tabbar4" tapmode onclick="randomSwitchBtn(this,'我',3)">
					<span class="aui-iconfont aui-icon-my"></span>
					<p>
						我
					</p>
				</li>
			</ul>
		</footer>
	</body>
	<script type="text/javascript" src="./script/api.js"></script>
	<script type="text/javascript" src="./script/winu-base.js"></script>
	<script type="text/javascript">
		var taobao = null, didi = null;
		apiready = function() {
			taobao = api.require('taobao');
			taobao.asyncInit();
			didi = api.require('didi');
			didi.registerApp(function(ret, err) {
				if (err) {
					_toast(JSON.stringify(err));
				}
			});
			var uid = $api.getStorage('uid');
			api.parseTapmode();
			//监听通知被点击
			var header = $api.byId('aui-header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var footer = $api.byId('aui-footer');
			var footer_h = $api.offset(footer).h;
			api.openFrameGroup({
				name : 'footer_tab',
				scrollEnabled : false,
				rect : {
					x : 0,
					y : headerPos.h,
					w : 'auto',
					h : api.winHeight - headerPos.h - footer_h
				},
				index : 0,
				preload : 0,
				frames : [{
					name : 'main',
					url : 'html/main/main.html',
					bounces : false
				}, {
					name : 'category',
					url : 'html/product/productlist.html',
					pageParam : {
						parentHeaderHeight : headerPos.h,
						parentFooterHeight : footer_h
					},
					bounces : false
				}, {
					name : 'myCart',
					url : '',
					bounces : false
				}, {
					name : 'user',
					url : 'html/user/user.html',
					bounces : false
				}]
			}, function(ret, err) {
				var footer = $api.byId('aui-footer');
				var footerAct = $api.dom(footer, '.aui-bar-tab li.active-warning');
				$api.removeCls(footerAct, 'active-warning');
				var name = ret.name;
				var index = ret.index;
				if (index == 0) {
					$api.text($api.byId('header-title'), '首页');
					$api.addCls($api.byId('tabbar1'), 'active-warning');
				} else if (index == 1) {
					$api.text($api.byId('header-title'), '分类');
					$api.addCls($api.byId('tabbar2'), 'active-warning');
				} else if (index == 2) {
					//					$api.text($api.byId('header-title'), '购物车');
					//					$api.addCls($api.byId('tabbar3'), 'active-warning');
				} else if (index == 3) {
					$api.text($api.byId('header-title'), '我');
					$api.addCls($api.byId('tabbar4'), 'active-warning');
				}
			});
		}
		function closeWin() {
			api.closeWin();
		}

		function randomSwitchBtn(obj, name, index) {
			if (name === '我') {
				//login
				var uid = $api.getStorage('uid');
				if (!uid) {
					api.openWin({
						name : 'userLogin',
						url : './html/user/login.html',
						opaque : true,
						vScrollBarEnabled : false
					});
					return;
				}
			}
			if (name === "购物车") {
				var param = {pid : ""};
				taobao.showMyCartsPage();
				return;
			}
			$api.text($api.byId('header-title'), name);
			var footer = $api.byId('aui-footer');
			var footerAct = $api.dom(footer, '.aui-bar-tab li.active-warning');
			$api.removeCls(footerAct, 'active-warning');
			$api.addCls(obj, 'active-warning');
			api.setFrameGroupIndex({
				name : 'footer_tab',
				index : index,
				scroll : true,
				reload : true
			});
		}

		var indexToDetail = function(title, url, itemId) {
			api.openWin({
				name : 'detailwinweb',
				url : './html/detail/detailwinweb.html',
				pageParam : {
					title : title,
					url : url,
					itemId : itemId
				},
				rect : {
					x : 0,
					y : 0,
					w : 'auto',
					h : 'auto'
				}
			});
		};
	</script>
</html>